import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { system_historydata } from "../../../utils/api"
import "../../../styles/Overview.scss"

interface Props {

}
function Overview(props: Props) {
    var [xaxis, setXaxis] = useState();
    var [series, setSeries] = useState();
    var [chuli, setChuli] = useState();

    //挂载
    useEffect(() => {
        system_historydata().then((res) => {
            console.log(res.data);
            setXaxis(res.data.list.xAxis);
            setSeries(res.data.list.series[0].data)
            setChuli(res.data.list.series[1].data)
        })
    }, [])

    useEffect(() => {
        type EChartsOption = echarts.EChartsOption;
        var chartDom = document.getElementById('main')!;
        var myChart = echarts.init(chartDom);
        var option: EChartsOption;
        option = {
            legend: { //设置图例
                top: 30
            },
            title: {
                text: '会话量数据趋势',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: xaxis,
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '会话量',
                    type: 'bar',
                    data: series,
                    label: {
                        show: true,
                        position: 'top'
                    },
                },
                {
                    name: '消息量',
                    type: 'bar',
                    data: chuli,
                    label: {
                        show: true,
                        position: 'top'
                    },
                }
            ]
        };
        option && myChart.setOption(option)

    })

    return (
        <div className='overview'>
            <h3>总览</h3>
            <div className='box'>
                <div className='box1'>
                    <div className='top'>
                        <span>总会话量</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>5w+</span>
                    </div>
                    <div className='buttom'>
                        <span>接入会话量 5w+</span>
                    </div>
                </div>
                <div className='box1'>
                    <div className='top'>
                        <span>总来访量</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>2w+
                        </span>
                    </div>
                    <div className='buttom'>
                        <span>非服务实际来访量 2w+</span>
                    </div>
                </div>
                <div className='box1'>
                    <div className='top'>
                        <span>总转出量</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>1w</span>
                    </div>
                    <div className='buttom'>
                        <span>人工转出量 1w</span>
                    </div>
                </div>
                <div className='box1'>
                    <div className='top'>
                        <span >平均会话时长</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>0s</span>
                    </div>
                    <div className='buttom'>
                        <span>应答率 30s</span>
                    </div>
                </div>
                <div className='box1'>
                    <div className='top'>
                        <span>相对满意率</span>
                        <span style={{ fontSize: "20px", color: "#1890ff" }}>100%</span>
                    </div>
                    <div className='buttom'>
                        <span>参评率100%</span>
                    </div>
                </div>
            </div>
            <h3 style={{ marginTop: "50px" }}>会话量</h3>
            <div className='pic' >
                <div id='main'>
                </div>
            </div>

        </div>

    );
}

export default Overview;